<template>
    <div class="app-container">
        <el-collapse-transition>
            <el-form v-if="openCondition" :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
                <el-form-item label="请求URI" prop="requestUri">
                    <el-input
                            v-model="queryParams.requestUri"
                            placeholder="请输入请求URI"
                            clearable
                            size="small"
                            @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="请求方式" prop="requestMethod">
                    <el-input
                            v-model="queryParams.requestMethod"
                            placeholder="请输入请求方式"
                            clearable
                            size="small"
                            @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="操作IP" prop="ip">
                    <el-input
                            v-model="queryParams.ip"
                            placeholder="请输入操作IP"
                            clearable
                            size="small"
                            @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="异常信息" prop="errorInfo">
                    <el-input
                            v-model="queryParams.errorInfo"
                            placeholder="请输入异常信息"
                            clearable
                            size="small"
                            @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="创建时间" prop="createDate">
                    <el-date-picker
                            v-model="dateRangeCreateDate"
                            size="small"
                            style="width:472px"
                            value-format="yyyy-MM-dd"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="创建人名" prop="creatorName">
                    <el-input
                            v-model="queryParams.creatorName"
                            placeholder="请输入创建人名"
                            clearable
                            size="small"
                            @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
            </el-form>
        </el-collapse-transition>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                        type="success"
                        size="mini"
                        @click="handleExport"
                >导出
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                        type="danger"
                        icon="el-icon-delete"
                        size="mini"
                        :disabled="multiple"
                        @click="handleDelete"
                        v-hasPermi="['system:errorLog:remove']"
                >删除
                </el-button>
            </el-col>
            <el-col :span="1.5" style="float: right">
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                <el-button :type="!openCondition?'success':'info'"
                           :icon="!openCondition?'el-icon-caret-bottom':'el-icon-caret-top'" size="mini"
                           @click="openCondition=!openCondition">{{!openCondition?'展开条件':'收起条件'}}
                </el-button>
            </el-col>
        </el-row>

        <el-table :data="errorLogList" height="580" :fit="true" @sort-change="handleSortChange"
                  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column label="请求URI" align="center" prop="requestUri"/>
            <el-table-column label="请求方式" align="center" prop="requestMethod"/>
            <el-table-column label="操作IP" align="center" prop="ip"/>
            <el-table-column label="简要异常" :show-overflow-tooltip="true" align="center" prop="errorSimpleInfo"/>
            <el-table-column label="创建者" align="center" prop="creatorName"/>
            <el-table-column label="创建时间" align="center" sortable="custom" prop="createDate" width="150">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createDate) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" fixed="right" width="180" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-info"
                            @click="handleView(scope.row)"
                    >详情
                    </el-button>
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-delete"
                            @click="handleDelete(scope.row)"
                            v-hasPermi="['system:errorLog:remove']"
                    >删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
        />

        <!-- 异常日志详情 -->
        <el-dialog title="异常日志详情" :visible.sync="viewOpen" width="750px">
            <el-form :inline="true" class="detail-inline" label-width="140px">
                <el-form-item label="请求URI：">
                    <input class="bird-view-info-input" disabled :title="viewData.requestUri"
                           :value="viewData.requestUri"/>
                </el-form-item>
                <el-form-item label="请求方式：">
                    <input class="bird-view-info-input" disabled :title="viewData.requestMethod"
                           :value="viewData.requestMethod"/>
                </el-form-item>
                <el-form-item label="用户代理：">
                    <input class="bird-view-info-input" disabled :title="viewData.userAgent"
                           :value="viewData.userAgent"/>
                </el-form-item>
                <el-form-item label="操作IP：">
                    <input class="bird-view-info-input" disabled :title="viewData.ip" :value="viewData.ip"/>
                </el-form-item>
                <el-form-item label="操作IP地址：">
                    <input class="bird-view-info-input" disabled :title="viewData.ipAddress"
                           :value="viewData.ipAddress"/>
                </el-form-item>
                <el-form-item label="创建者：">
                    <input class="bird-view-info-input" disabled :title="viewData.creator" :value="viewData.creator"/>
                </el-form-item>
                <el-form-item label="创建时间：">
                    <input class="bird-view-info-input" disabled :title="viewData.createDate"
                           :value="viewData.createDate"/>
                </el-form-item>
                <el-form-item label="创建人：">
                    <input class="bird-view-info-input" disabled :title="viewData.creatorName"
                           :value="viewData.creatorName"/>
                </el-form-item>
                <el-form-item label="请求参数：">
                    <div class="bird-pre-view">
                        <pre style="color: #606266" v-html="viewData.requestParams"></pre>
                    </div>
                </el-form-item>
                <el-form-item style="width: 100%" label="异常简要信息：">
                    <div class="bird-pre-view">
                        <pre style="color: #606266" v-html="viewData.errorSimpleInfo"></pre>
                    </div>
                </el-form-item>
                <el-form-item label="异常信息：">
                    <div class="bird-pre-view">
                        <pre style="color: #606266" v-html="viewData.errorInfo"></pre>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="viewOpen = false" size="mini">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {delErrorLog, exportErrorLog, getErrorLog, listErrorLog} from "@/api/system/errorLog";

    export default {
        data() {
            return {
                // 条件展开
                openCondition: true,
                // 是否修改
                edit: false,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 总条数
                total: 0,
                // 异常日志表格数据
                errorLogList: [],
                // 弹出层标题
                title: "",
                // 是否显示详情弹出层
                viewOpen: false,
                // 是否显示弹出层
                open: false,
                // 创建时间范围查询
                dateRangeCreateDate: [],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    orderByColumn: 'id',
                    isAsc: 'desc'
                },
                // 详情参数
                viewData: {},
                // 表单参数
                form: {},
                // 表单校验
                rules: {}
            };
        },
        created() {
            this.getList();
        },
        methods: {
            /** 查询异常日志列表 */
            getList() {
                // 创建时间范围设置
                this.addDateRangeField(this.queryParams, this.dateRangeCreateDate, 'CreateDate')
                listErrorLog(this.queryParams).then(response => {
                    this.errorLogList = response.data.list;
                    this.total = response.data.total;
                });
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 表单重置
            reset() {
                this.resetPropField(this.form);
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.dateRangeCreateDate = [];
                this.resetPropField(this.queryParams, {pageNum: 1, pageSize: 10, orderByColumn: 'id', isAsc: 'desc'});
                this.handleQuery();
            },
            // 排序改变事件
            handleSortChange(sorter) {
                this.handleSort(this.queryParams, sorter);
                this.getList();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id)
                this.single = selection.length != 1
                this.multiple = !selection.length
            },
            /** 详细按钮操作 */
            handleView(row) {
                const id = row.id
                getErrorLog(id).then(response => {
                    const {data} = response;
                    this.viewData = {
                        ...data,
                    }
                    this.viewOpen = true;
                });
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const ids = row.id || this.ids;
                this.$confirm('是否确认删除异常日志数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return delErrorLog(ids);
                }).then(() => {
                    this.getList();
                    this.msgSuccess("删除成功");
                });
            },
            /** 删除按钮操作 */
            handleExport() {
                exportErrorLog(this.queryParams);
            }
        }
    };
</script>
